<template>
  <div class="app-container">
    <div class="topSearch">
      <el-row>
        <el-dropdown @command="addProduct">
          <el-button type="primary">
            New add<i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="ShopifyDet">SHOPIFY</el-dropdown-item>
            <el-dropdown-item command="WoocDet">WOOCOMMERCE</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button
          type="primary"
          @click="showTemplateDialog()"
        >Quick Add</el-button>
      </el-row>
    </div>

    <!-- POD 列表 -->
    <div class="podList">
      <img v-for="item in podList" :key="item.id" class="active" :src="require('../../assets/imgs/'+item.name+'.png')" @click="goDesign(item.id)">
    </div>

    <el-dialog
      title="Select the added product"
      :visible.sync="dialogVisible"
      width="400px"
    >
      <el-form>
        <el-form-item>
          <el-select
            v-model="selectedTemplateId"
            placeholder="Select the added product"
          >
            <el-option
              v-for="item in templateList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <el-image :src="imgPrefix + item.imageUri + imgSuffix" />
              {{ item.name }}
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      selectedTemplateId: null,
      templateList: [
        {
          id: 1,
          name: 'product test',
          imageUri: '4D6E4AFD9571CAE4960F2B2E00376F42.jpeg'
        }
      ],
      podList: [
        {
          id: 0,
          name: 'POD',
          imageUri: '../../assets/imgs/POD.png'
        },
        {
          id: 1,
          name: 'POD1',
          imageUri: '../../assets/imgs/POD1.png'
        },
        {
          id: 2,
          name: 'POD2',
          imageUri: '../../assets/imgs/POD2.png'
        }
      ]
    };
  },
  mounted() {},
  methods: {
    addProduct(command) {
      this.$router.push({
        name: command
      });
    },
    showTemplateDialog() {
      this.dialogVisible = true;
    },
    goDesign(id) {
      window.modelId = id;
      this.$router.push(`/onlineDesign?designId=${id}`);
    }
  }
};
</script>

<style scoped lang="scss">
.el-select {
  width: 100%;
}
.podList {
  img {
    width: 120px;
    height: 120px;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: .3s;
    &:hover {
      transform:scale(.8);
    }
  }
}
</style>
